<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 查询表单；查询按钮 -->
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <div class="layui-inline">
            <label class="layui-form-label">陪诊员姓名</label>
            <div class="layui-input-inline">
                <input id="input1" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline layui-input-wrap">
                <input id="input2" type="text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询陪诊员" class="layui-btn">
        </div>
    </div>
</form>

<table id="table1"></table>

<!-- 状态切换模板 -->
<script id="ID-table-demo-templet-switch" type="text/html" th:inline="none">
    <input type="checkbox" name="status" value="{{=d.id }}" title="正常用户|停用" lay-skin="switch"
           lay-filter="demo-templet-status" {{=d.status== 0 ? "checked" : "" }}>
</script>

<!-- 引入依赖的js文件 -->
<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'table', 'upload'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var table = layui.table;//操作表格
        var upload = layui.upload;//上传文件
        var $ = layui.jquery;//从layui中把jquery拿出来用


        //给查询按钮绑定事件
        $("#searchBtn").on("click", function () {
            //渲染表格
            table.render({
                elem: "#table1",
                url: "/worker/table",
                cols: [[
                    //field中的属性名必须与User类中定义的成员变量名一致
                    {title: "ID", field: "id"},
                    {title: "用户昵称", field: "nickname"},
                    {title: "电话", field: "phoneNumber"},
                    {title: "姓名", field: "name"},
                    {title: "性别", field: "sex"},
                    {title: "年龄", field: "age"},
                    {title: "身份证号码", field: "idCardNumber"},
                    {title: "专业背景", field: "proBack"},
                    {title: "执业口号", field: "title"},
                    {title: '状态', width: 150, templet: '#ID-table-demo-templet-switch'}
                ]],
                where: {name: $("#input1").val(), phoneNumber: $("#input2").val()},
                page: true,
                limits: [10, 15, 20],
                limit: 10
            });
        }).click();

        //给切换状态绑定事件
        form.on('switch(demo-templet-status)', function (obj) {
            console.log(obj.value);//要操作的商品的ID
            console.log(obj.elem.checked);//true就是正常用户，false就是停用
            $.post("/worker/status", {id: obj.value, status: obj.elem.checked ? 0 : 1}, function () {
                layer.msg("更新状态成功");
            });
        });

    });
</script>


</body>
</html>
